<!--  -->
<template>
<div class='a1'>
  <div class="box">
    <el-form :model="formdata" :rules='rules' ref="submitForm">
      <el-form-item  prop='name'>
        <el-input v-model="formdata.name"  placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item  prop='mima'>
        <el-input v-model="formdata.mima"  placeholder="密码" ></el-input>
      </el-form-item>
      <el-button type="primary" size="default" @click="denglu('submitForm')">登录</el-button>
    </el-form>
  </div>
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {
  formdata:{
    name:'',
    mima:''
  },
  rules:{
      name:{
        required:true,
        message:'用户名不能为空',
        trigger:'blur'
      },
      mima:{
        required:true,
        message:'密码不能为空',
        trigger:'blur'
      }
  },
  model:'',
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
  denglu:function(formName){
    this.$refs[formName].validate((valid)=>{
      if(valid){
        this.$axios.post('/admin/login',{
          user_name:this.formdata.name,
          password:this.formdata.mima,
        })
        .then((res)=>{
          if(res.status === 1){
            this.$message({
              type:'success',
              message:'ok'
            })
            this.$store.commit('ok')
            this.$router.push('/zhuyemian')
          }else{
            this.$message({
              type:'warning',
              message:'账号或者密码有问题'
            })
          }
        })
      }else{
        this.$message({
          type:'warning',
          message:'不可以提交！'
        })
        return
      }
    })
  }
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {

},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='less' scoped>
div.a1 {
  
  div.box {
    width: 500px;
    height: 450px;
    position: absolute;
    left: 0;right: 0;bottom:0;top:0;
    margin: auto;
    el-form {
      width: 500px;
      el-form-item {
        width: 500px;
        el-input {
          width: 500px;
        }
      }

      el-button {
        width: 500px;
        display: block;
      }
    }
  }
}
.el-button{
  width: 500px;
        display: block;
}
</style>